import React, { useState } from 'react';
import { CreditPackage } from '../services/credits';
import CreditPackageCard from './CreditPackageCard';

interface CreditPackageGridProps {
  creditPackages: CreditPackage[];
  isLoading: boolean;
  isAuthenticated: boolean;
  onPurchase: (creditPackage: CreditPackage) => void;
  defaultHighlightIndex?: number | null;
}

const CreditPackageGrid: React.FC<CreditPackageGridProps> = ({
  creditPackages,
  isLoading,
  isAuthenticated,
  onPurchase,
  defaultHighlightIndex = 1, // 默认高亮中间的Pro套餐
}) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(defaultHighlightIndex);

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
      {creditPackages.map((creditPackage, index) => {
        const isHighlighted = hoveredIndex === index;
        return (
          <div 
            key={creditPackage.id}
            onMouseEnter={() => setHoveredIndex(index)}
            onMouseLeave={() => setHoveredIndex(defaultHighlightIndex)}
          >
            <CreditPackageCard
              creditPackage={creditPackage}
              index={index}
              isHighlighted={isHighlighted}
              isLoading={isLoading}
              isAuthenticated={isAuthenticated}
              onPurchase={onPurchase}
            />
          </div>
        );
      })}
    </div>
  );
};

export default CreditPackageGrid;